<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <div class="nv">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">petstore</el-menu-item>

                <el-submenu index="5" style="float:right;">
                    <template slot="title">我的</template>
                    <el-menu-item class="draw" index="2-3" @click="cart()">购物车</el-menu-item>
                    <el-menu-item class="draw" index="2-4" @click="order()">我的订单</el-menu-item>
                    <el-menu-item class="draw" index="2-5" @click="exit()">退出登录</el-menu-item>
                </el-submenu>
            </el-menu>

            <div class="line"></div>
        </div>
        <router-view></router-view>
        <el-drawer
                :title="title"
                :visible.sync="drawer"
                :direction="direction"
        >
            <div v-if="direction == 'rtl'">
                <div v-if="cartList!== undefined && cartList.length >0">
                    <div v-for="(a,i) in cartList" :key="a" :index="i">
                        <div class="cartlist">
                            <div class="cartimg">
                                <div class="block">
                                    <el-avatar shape="square" :size="90" :src="a.imgUrl"></el-avatar>
                                </div>
                            </div>
                            <span class="title">商品名：{{a.title}}</span>
                            <span class="price">价格：{{a.price}}</span>
                            <div class="cz">
                                <el-button @click="sub(a,i)">购买</el-button>
                                <el-button @click="removethis(i)">删除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <h2>购物车无内容</h2>
                </div>
            </div>
            <div v-if="direction == 'ltr'">
                <div v-if="orderList!== undefined && orderList.length >0">
                    <div v-for="(b,n) in orderList" :key="b" :index="n">
                        <div class="orderlist">
                            <span class="orderno">订单编号：{{b.orderNo}}</span>
                            <span class="ordername">商品名：{{b.goodName}}</span>
                            <span class="orderprice">购买金额：{{b.price}}</span>
                            <span class="ordertime">购买时间：{{b.createTime}}</span>
                        </div>
                        <hr>
                    </div>
                </div>
                <div v-else>
                    <h2>无订单</h2>
                </div>
            </div>

        </el-drawer>

    </div>
</template>

<script>
    import Cookie from 'js-cookie'

    export default {
        name: "x-nav",
        data() {
            return {
                title: "",
                activeIndex: '1',
                activeIndex2: '1',
                drawer: false,
                direction: "rtl",
                cartList: [],
                orderList: []
            }
        }
        ,
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            cart() {
                console.log(Cookie.get("token"))
                if (Cookie.get("token") !== null && Cookie.get("token") !== undefined) {
                    this.title = "购物车";
                    this.direction = "rtl";
                    this.drawer = true
                    let id = JSON.parse(Cookie.get("token")).id;
                    this.$http.get('/cart/list?id=' + id, {}).then(data => {
                        if (data.data.code === 100000) {
                            this.cartList = data.data.data
                            console.log(this.cartList)
                        }
                    })
                } else {
                    alert("未登录")
                    this.$router.push("/login")
                }
            },
            exit() {
                Cookie.remove("token");
                location.reload()

            },
            order() {
                if (Cookie.get("token") !== null && Cookie.get("token") !== undefined) {
                this.title = "订单列表"
                this.direction = "ltr",
                 this.drawer = true
                this.$http.get('order/list', {
                    params: {
                        id: JSON.parse(Cookie.get("token")).id,
                    }
                }).then(data => {
                    if (data.data.code === 100000) {
                        this.orderList=data.data.data;
                        console.log(this.orderList)
                    }
                });
                 } else {
                    alert("未登录")
                    this.$router.push("/login")
                }
            },
            removethis(index) {
                var id = this.cartList[index].id;
                this.$http.get('cart/del', {
                    params: {
                        id: id,
                    }
                }).then(data => {
                    if (data.data.code === 100000) {
                        this.$message.success("删除成功")
                        this.cartList.splice(index, 1);
                    }
                });
            },
            //购买
            sub(a,i){
                this.$http.get('order/sub',{
                    params:{
                        id:a.id
                    }
                }).then(data=>{
                    if (data.data.code ===100000){
                        this.$message.success("购买成功");
                        this.cartList.splice(i,1)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .cartlist {
        height: 100px;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        background-color: #cccccc;
    }

    .cartimg {
        margin: 5px;
    }

    .title, .price {
        width: 120px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; /*文本不换行*/
        text-overflow: ellipsis
    }

    .price {
        color: red;
    }

    .cz {
        display: flex;
    }

    .orderlist {
        padding-left: 10px;
        position: relative;
        height: 100px;
        margin-top: 10px;
        overflow: hidden;
        white-space: nowrap; /*文本不换行*/
        text-overflow: ellipsis;
        background-color: #cccccc;
    }

    .orderno {
        height: 100px;
        line-height: 100px;
    }

    .ordername {
        margin-left: 10px;
    }

    .orderprice, .ordertime {
        margin-left: 30px;
    }

    .orderprice {
        position: absolute;
        margin-top: 20px;
    }

    .ordertime {
        position: absolute;
        margin-top: 50px;
    }
</style>